import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import { I18N } from 'xgplayer'
import ZH from 'xgplayer/es/lang/zh-cn'
import video from '@/assets/video/video1.mp4'
import { mounted } from '@/hooks/hooks';
import { useEffect } from 'react';
 import { VideoComponent } from '../interface';

let player: Player | null = null

// 使用中文
I18N.use(ZH)


export default (_props: VideoComponent) => {
  
  mounted(() => {
    player = new Player({
      id: `mse${_props.domIndex}`,
      url: video,
      height: '75%',
      width: '100%',
      controls: false,
      miniprogress: true,
      playsinline: true,
      closeVideoDblclick: true
    });

    _props.returnInstance(
      player
    )
  })
  return <div id={`mse${_props.domIndex}`}></div>
}